<template>
  <div>
    <section class="pt-4 pb-0 card-grid">
      <div class="container">
        <div class="row g-4">
          <!-- Left big card -->
          <div class="col-lg-6">
            <div id="he-plugin-standard"></div>
            <br /><br />
            <h1>农产品分类</h1>
          </div>
          <!-- Right small cards -->
          <div class="col-lg-6">
            <div class="row g-4">
              <!-- Card item START -->
              <div class="col-12">
                <div
                  class="card card-overlay-bottom card-grid-sm card-bg-scale"
                  style="
                    background-image: url(static/img/1.jpg);
                    background-position: center left;
                    background-size: cover;
                  "
                >
                  <!-- Card Image -->
                  <!-- Card Image overlay -->
                  <div
                    class="
                      card-img-overlay
                      d-flex
                      align-items-center
                      p-3 p-sm-4
                    "
                  >
                    <div class="w-100 mt-auto">
                      <!-- Card category -->
                      <a href="#" class="badge bg-warning mb-2">Today</a>
                      <!-- Card title -->
                      <h1 class="text-white">
                        <label class="btn-link stretched-link text-reset">{{
                          today
                        }}</label>
                      </h1>
                      <!-- Card info -->
                      <ul
                        class="
                          nav nav-divider
                          text-white-force
                          align-items-center
                          d-none d-sm-inline-block
                        "
                      >
                        <li class="nav-item position-relative">
                          <div class="nav-link">
                            <lable class="stretched-link text-reset btn-link"
                              >农历：{{ nongli }}</lable
                            >
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Card item END -->
            </div>
          </div>
        </div>
      </div>

      <br />
    </section>
    <vegetable></vegetable>
    <hr />
    <fruit></fruit>
    <hr />
    <EggsAndMeat></EggsAndMeat>
    <hr />
    <nuts></nuts>
    <hr />
    <fungus></fungus>
    <hr />
    <GrainOilCrops></GrainOilCrops>
    <hr />
  </div>
</template>

<script>
import vegetable from "@/components/species/vegetable";
import fruit from "@/components/species/fruit";
import EggsAndMeat from "@/components/species/EggsAndMeat";
import nuts from "@/components/species/nuts";
import fungus from "@/components/species/fungus";
import GrainOilCrops from "@/components/species/GrainOilCrops";
export default {
  data() {
    return {};
  },
  components: {
    vegetable: vegetable,
    fruit: fruit,
    EggsAndMeat: EggsAndMeat,
    nuts: nuts,
    fungus: fungus,
    GrainOilCrops: GrainOilCrops,
  },
  created() {
    window.WIDGET = {
      CONFIG: {
        layout: "1",
        width: "450",
        height: "150",
        background: "1",
        dataColor: "FFFFFF",
        borderRadius: "7",
        key: "465d273674104300a125afcae56c08b7",
      },
    };
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src =
      "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.body.appendChild(s);

    var date = new Date();
    this.today = date.toLocaleDateString();

    this.nongli = new Date()
      .toLocaleDateString("zh-CN-u-ca-chinese")
      .replace(
        /(\d+)\s*?年/,
        (_, y) =>
          "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10) +
          "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12)
      );
  },
};
</script>

<style scoped>
@import url("../../../static/css/style.css");
</style>